<template>
  <div class="page">
    <div class="top">
      <img src="../assets/btn.png" alt="" />
    </div>
    
    <div :class="isactive?'add':'tit'">
      <h3>太平福绿20保险产品计划</h3>
      <p>
        <span>被保人</span>
        <b>男 30岁</b>
      </p>
    </div>
       <table border="1" id="table">
      <tr>
        <td>产品简称</td>
        <td>保障期</td>
        <td>交费期</td>
        <td>保额/计划</td>
        <td>保费</td>
      </tr>
      <tr>
        <td>福绿20两全</td>
        <td rowspan="2">至80岁</td>
        <td rowspan="2">20年</td>
        <td rowspan="2">300000</td>
        <td>3810.0</td>
      </tr>
      <tr>
        <td>附加福绿20重庆</td>
        <td>5160.0</td>
      </tr>
      <tr>
        <td>医安心</td>
        <td>1年</td>
        <td>1年</td>
        <td>计划2</td>
        <td>908.0</td>
      </tr>
      <tr>
        <td>超e保2021</td>
        <td>1年</td>
        <td>1年</td>
        <td>详见条款</td>
        <td>319.0</td>
      </tr>
      <tr>
        <td colspan="5">
          首年保费合计：<span style="color: #c80b1a; font-weight: bold"
            >10197.0元</span
          >
        </td>
      </tr>
    </table>   
    </div>
</template>

<script>
export default {
  props:['indicator'],
  computed: {
    isactive(){
      return this.indicator
    },
  },
};
</script>

<style lang="less" scoped>
.add{
    width: 95%;
    height: 100px;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
    animation: bounce-up2 2s ease 0.5s;
    margin-left: -360px;
    animation-fill-mode: forwards;
    @keyframes bounce-up2 {
      100%,
      50% {
        transform: translateX(370px);
      }
    }
    h3 {
      padding-left: 20px;
      padding-top: 20px;
    }
    p {
      padding: 20px;
      b {
        color: rgb(170, 135, 39);
        font-size: 18px;
        padding: 0 20px;
      }
    }
}
.page {
  width: 100%;
  height: 100%;
  background: #f2ebe3;
  .top {
    width: 100%;
    height: 100px;
    background: url(../assets/benner.png) no-repeat 50%;
    background-size: cover;
    position: relative;
    img {
      position: absolute;
      right: 15px;
      top: 10px;
      width: 30px;
      height: 30px;
      z-index: 1;
      animation: run 4s linear 0s infinite;
    }
    @keyframes run {
      from {
        -webkit-transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(360deg);
      }
    }
  }

  .tit {
    width: 95%;
    height: 100px;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
          animation: bounce-up 2s ease 0.5s;
    margin-left: 613px;
    animation-fill-mode: forwards;
    @keyframes bounce-up {
      100%,
      50% {
        transform: translateX(-600px);
      }
    }
    h3 {
      padding-left: 20px;
      padding-top: 20px;
    }
    p {
      padding: 20px;
      b {
        color: rgb(170, 135, 39);
        font-size: 18px;
        padding: 0 20px;
      }
    }
  }
  #table {
    font-size: 12px;
    width: 95%;
    margin: 0 auto;
    height: 260px;
    margin-top: 10px;
    border-collapse: collapse;
    border: 1px solid #f0f1f1;
    color: #666666;
    text-align: center;
    background: #fff;
    animation: bounce-up 2s ease 1s;
    margin-left: 613px;
    animation-fill-mode: forwards;
    @keyframes bounce-up {
      100%,
      50% {
        transform: translateX(-600px);
      }
    }
    tr:nth-child(1) {
      background: rgba(247, 237, 226, 0.2);
    }
  }
  .down_icon {
    width: 100%;
    position: absolute;
    bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>